import Vue from 'vue'

// 2.0 导入 登录 和 注册 两个组件
import HomeContainer from '../components/tabbars/HomeContainer.vue' // 导入 Home 组件
import MemberContainer from '../components/tabbars/MemberContainer.vue' // 导入 Member 组件
import ShopcarContainer from '../components/tabbars/ShopcarContainer.vue' // 导入Shopcar 组件
import SearchContainer from '../components/tabbars/SearchContainer.vue' // 导入 Search 组件
import NewsList from '../components/news/newslist.vue' // 新闻列表的组件
import NewsInfo from '../components/news/newsinfo.vue' // 新闻详情组件
import PhotoList from '../components/photo/photolist.vue' // 图片列表组件
import PhotoInfo from '../components/photo/photoinfo.vue' // 图片详情组件
import GoodsList from '../components/goods/goodslist.vue' // 商品列表组件
import GoodsInfo from '../components/goods/goodsinfo.vue' // 商品详情组件
import GoodsDesc from '../components/goods/goodsdesc.vue' // 商品描述组件
import GoodsComment from '../components/goods/goodscoment.vue' // 商品评论组件


// 2.1 导入路由模块
import VueRouter from 'vue-router'
// 2.2 将路由模块注册到 Vue 身上
Vue.use(VueRouter);
// 2.3 创建路由对象
const router = new VueRouter({
  // mode: 'history',
  routes: [ // 所有路由规则
    { path: '/', redirect: '/home' }, // 首页路由重定向到 home 组件页面
    { path: '/home', component: HomeContainer }, // Home 组件对应的路由
    { path: '/member', component: MemberContainer }, // member 组件对应的路由
    { path: '/shopcar', component: ShopcarContainer }, // shopcar 组件对应的路由
    { path: '/search', component: SearchContainer }, // search 组件对应的路由
    { path: '/home/newslist', component: NewsList }, // 新闻列表路由规则 // 对应的页面列表，请参考 mui demo 中的  media-list.html
    { path: '/home/newsinfo/:id', component: NewsInfo }, // 新闻详情路由规则
    { path: '/home/photolist', component: PhotoList }, // 图片列表的路由规则
    { path: '/home/photoinfo/:id', component: PhotoInfo }, // 图片详情路由规则
    { path: '/home/goodslist', component: GoodsList }, // 商品列表路由规则
    { path: '/home/goodsinfo/:id', component: GoodsInfo, name: 'goodsinfo' }, // 商品详情路由规则
    { path: '/home/goodsdesc/:id', component: GoodsDesc }, // 商品描述路由规则
    { path: '/home/goodscomment/:id', component: GoodsComment } // 商品评论路由规则
  ],
  linkActiveClass: 'mui-active'   //  官方 默认的 激活类名 是 router-link-active
});

// 将路由对象暴露出去
export default router;